<template>
    <div class="grid">
        <ChfGrid v-bind="gridOptions" ref="grid">
            <template #operate="{row,item}">
                <el-button type="text" size="small" @click="edit(row,item)">
                    编辑
                </el-button>
                <el-button type="text" size="small" @click="del(row,item)">
                    删除
                </el-button>
            </template>
            <template #form="{row}">
                <el-form label-position="left">
                    <el-form-item label="姓名">
                        <span>{{ row.name }}</span>
                    </el-form-item>
                    <el-form-item label="日期">
                        <span>{{ row.birthday }}</span>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <span>{{ row.age }}</span>
                    </el-form-item>
                    <el-form-item label="性别">
                        <span>{{ row.gender }}</span>
                    </el-form-item>
                    <el-form-item label="地址">
                        <span>{{ row.county }}</span>
                    </el-form-item>
                </el-form>
            </template>
            <template #input="{scope,item}">
                <el-input v-model="value" placeholder="搜索" size="mini"></el-input>
            </template>
        </ChfGrid>
    </div>
</template>



<script>
import formConfigFn from "./formConfig.js"
import grid from "@/mixins/grid.js"
export default {
    mixins: [grid],
    data () {
        return {
            value: '1111',
            formConfig: formConfigFn(this),
            gridOptions: {
                tableConfig: {
                    options: {
                        // column:false,
                        data: [],
                        rowKey: "id",
                        lazy: true,
                        load: this.load,
                        treeProps: { children: 'children', hasChildren: 'hasChildren' },
                        highlightCurrentRow: true,
                    },
                    columns: [
                        { type: "expand", slotName: 'form' },
                        { type: "selection", width: 60, },
                        { label: "id", prop: "id", width: 120 },
                        // { label: "姓名", prop: "name"},
                        // { label: "照片", prop: "img"},
                        //render演示
                        {
                            label: "图片",
                            render: (row) => {
                                return (
                                    <el-image style="width: 100px; height: 100px" src={row.img} previewSrcList={[row.img]} fit="contain"></el-image>
                                )
                            }
                        },
                        {
                            label: "家庭住址", children: [{ label: '姓名', prop: 'name' }, {
                                label: '地址', children: [{
                                    label: "省", prop: "county", formatter: ({ county }) => {
                                        return county.split(' ')[0]
                                    }
                                }, {
                                    label: "市", prop: "county", formatter: ({ county }) => {
                                        return county.split(' ')[1]
                                    }
                                }, {
                                    label: "区", prop: "county", formatter: ({ county }) => {
                                        return county.split(' ')[2]
                                    }
                                }]
                            }]
                        },
                        {
                            label: "性别", prop: "gender", formatter: ({ gender }) => {
                                return gender ? '男' : '女'
                            },
                            // 筛选
                            columnKey: "gender",
                            filters: [{ text: '男', value: 1 }, { text: '女', value: 0 }],
                            ['filter-method'] (value, row, column) {
                                return row.gender === value
                            }
                        },
                        { label: "出生日期", prop: "birthday", width: 200, sortable: true, },
                        // 插槽方式
                        // {
                        //     label: "操作",
                        //     type: "slot",
                        //     slotName: "operate",
                        // },
                        // render方式
                        {
                            label: "操作",
                            render: (row) => {
                                return (
                                    <span>
                                        <el-button type="text" size="small" on-click={() => { this.addOrEdit(row) }}> 编辑 </el-button>
                                        <el-button type="text" size="small" on-click={() => { this.del(row.id) }}> 删除 </el-button>
                                    </span>
                                )
                            }
                        },
                    ],
                    events: {
                        'selection-change': (list) => {
                            this.batchId = list.map(item => item.id)
                        },
                        'current-change' (val) {
                            // console.log(val);
                        },
                    },
                },
                toolbarConfig: [
                    {
                        content: '新增', type: "primary", icon: "el-icon-plus", click: () => {
                            this.addOrEdit();
                        }
                    },
                    {
                        content: "上传",
                        type: "primary",
                        icon: "el-icon-upload",
                        click: async () => {
                            const files = await this.$readFile({
                                accept: ".png",
                                fileSize: 2,
                                // multiple: true,
                            })
                            this.$message.success(`选了${files.length || 1}个文件`);
                            console.log(files);
                        }
                    },
                    {
                        content: '批量删除', icon: "el-icon-delete", click: () => { this.del() }
                    }
                ],
                pagerConfig: {
                    options: {
                        pageSize: 10
                    },
                    events: {

                    }
                },
                proxyConfig: {
                    api: 'getTableData',
                    beforeQuery (params) {
                        return params
                    },
                    callback: (res, params) => {
                        // console.log(params);
                    }
                },
                formConfig: {
                    options: {
                        inline: true,
                        // ['show-message']:false
                    },
                    items: [
                        {
                            formItem: { label: "性别" },
                            itemRender: {
                                el: "el-select",
                                placeholder: "选择性别",
                                value: "region",
                                options: [],
                                async query () {
                                    setTimeout(() => {
                                        this.options = [
                                            { label: '男', value: 1 },
                                            { label: '女', value: 0 }
                                        ]
                                    }, 5000);
                                }
                            },
                        },
                        {
                            formItem: { label: "姓名" },
                            itemRender: {
                                el: "el-input",
                                placeholder: "搜索姓名",
                                value: "name",
                            },
                        },
                        {
                            type: 'button',
                            formItem: {
                                children: [
                                    { content: '查询', submit: true, type: 'primary' },
                                    { content: '重置', reset: true }
                                ]
                            }
                        }
                    ]
                }
            },
        }
    },
    mounted () {
    },
    methods: {
        async load (tree, treeNode, resolve) {
            const { result } = await this.$api.getTableData5();
            resolve(result)
        },
        addOrEdit (row) {
            this.$dialog({
                options: {
                    center: true,
                    width: '430px'
                },
                btns: [
                    {
                        submit: true, type: "primary", content: "确定", click: (options) => {
                            console.log(this.$refs.form);
                            this.$refs.form.submitForm().then(async params => {
                                let interfaceType = 'addTable'
                                if (row) {
                                    interfaceType = 'editTable'
                                }
                                const res = await this.$api[interfaceType](params);
                                res && this.$message({
                                    message: row ? '编辑成功！' : '添加成功！',
                                    type: 'success'
                                });
                                this.$refs.grid.getData();
                                options.dialogVisible = false
                            })
                        }
                    },
                    {
                        content: "取消", click: (options) => {
                            options.dialogVisible = false
                        }
                    }
                ],
                render: (h, options) => {
                    console.log(options);
                    this.formConfig.formData = row || null;
                    return (
                        <ChfForm  {...{ attrs: this.formConfig }} ref="form" />
                    )
                },
            })
        },

    },
};
</script>

<style lang="scss" scoped>
.grid {
    background: white;
    ::v-deep .el-table__body tr.current-row > td {
        background: #999ea1;
    }
}
</style>